<template>
  <div class="home">
    <div class="list">
      <div
        v-for="item in tabelList"
        :key="item.id"
        class="p-2 flex border-dashed border-b-2 border-gray-100"
        @click="onCLickDetail(item)"
      >
        <span class="flex-1 text-base">{{ item.questionnaireInfo.title }}</span>
        <span class="text-gray-700 text-xs">提交于：{{ item.create_time }}</span>
        <span class="text-gray-700 text-xs ml-1">评级：{{ item.scopeResult }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuestionnaireRecordList } from 'api/questionnaire'
export default {
  name: 'Home',
  data() {
    return {
      tabelList: [],
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 12 // 每页条数-默认10
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    findMatchingScope(scope, total) {
      if (!scope || scope.length === 0) {
        return null
      }
      const matchingScope = scope.find(
        (v) => Number(v.min) <= total && total <= Number(v.max)
      )
      return matchingScope || null
    },
    async getList() {
      getQuestionnaireRecordList({
        // questionnaireId: this.$route.query.id
      })
        .then((res) => {
          if (res.code === 200) {
            res.data.list.map((v) => {
              const scope = this.findMatchingScope(
                v.questionnaireInfo.scope,
                Number(v.result)
              )
              v.scopeResult = scope?.title || '无评级'
            })
            this.tabelList = res.data.list
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onCLickDetail(item) {
      this.$router.push({
        path: '/questionnaire/detail',
        query: {
          id: item.id,
          type: 'history'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  background-color: #f7f7f7;
  min-height: 90vh;
}
.list {
  width: 694px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
}
</style>
